<template>
    <div>
        <page-header title="任务详情" content="Task details" />
        <page-main>
            <h1>
                <el-page-header content="详情:" @back="goBack" />
            </h1>
        </page-main>
        <page-main>
            <el-row type="flex" justify="center" align="middle">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <h3 style="color: #498dff;">日期：{{ time }}</h3>
                    <el-card class="box-card" shadow="always">
                        <!--标题预览-->
                        <h2 style="text-align: center;">{{ title }}</h2>
                    </el-card>
                    <el-card class="box-card" shadow="always">
                        <!--内容详情预览-->
                        <h2>内容详情：</h2>
                        <div class="preview" v-html="message_detail" />
                    </el-card>
                    <el-card v-if="result_show" class="box-card" shadow="always">
                        <!--内容详情预览-->
                        <h2 style="color: orange;" >
                            需要提交的任务结果：
                            <div style="text-indent: 2em; text-decoration: underline; color: #4598f9;" v-text="message.result_name"></div>
                        </h2>
                        <!--<el-steps :space="300" :active="3" finish-status="success" align-center>-->
                        <!--    <el-step title="已上传成功" />-->
                        <!--    <el-step title="审核中" />-->
                        <!--    <el-step title="未通过审核" />-->
                        <!--</el-steps>-->
                        <div align="center">
                            <el-upload
                                ref="upload"
                                class="upload-demo"
                                action
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false"
                                :http-request="uploadImg"
                            >
                                <el-button slot="trigger" size="medium" type="primary" style="margin: 10px;"><i class="el-icon-folder-add"></i>    选取任务结果文件</el-button>
                                <el-button style="margin: 10px;" size="medium" type="success" @click="submitUpload"><i class="el-icon-upload2"></i>    上传到服务器</el-button>
                                <div slot="tip"  class="el-upload__tip"> 上传文件大小不能超过50Mb</div>
                            </el-upload>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageHeader from '../../components/PageHeader/index'
import PageMain from '../../components/PageMain/index'
import api from '@/api'
export default {
    name: 'message.details',
    components: {PageMain, PageHeader},
    data() {
        return {
            title: '',
            time: '',
            message: [],
            message_detail: null,
            publisher: null,
            result_show: false,
            messageType: null,
            message_id: null,
            result_name: null,
            result_url: null,

            // 上传列表数据
            fileList: [],
            asuccess: false,
            id: 11,
            name: ''
        }
    },
    created() {
        if (this.$route.query.type == null) {
            console.log('item')
            this.$router.push({
                path: '/student/message'
            })
        } else {
            this.title = this.$route.query.type.message_title
            this.time = this.$route.query.type.time
            this.publisher = this.$route.query.type.publisher
            this.messageType = this.$route.query.type.messageType
            this.message_id = this.$route.query.type.id
        }
        if (this.publisher == '教师') {
            if (this.messageType == '任务') {
                this.result_show = true
                // TODO 查询教师任务表
                // 获取消息详情信息
                api.post('studentMessage/findTeacherTask', { message_id: this.message_id, receiver: this.receiver})
                    .then(res => {
                        this.message = res.data[0]
                        this.message_detail = res.data[0].message_detail
                    })

            } else if (this.messageType == '通知') {
                this.result_show = false
                // TODO 查询教师通知表
                api.post('studentMessage/findTeacherNotice', { message_id: this.message_id, receiver: this.receiver})
                    .then(res => {
                        this.message_detail = res.data
                    })
            }
        } else if (this.publisher == '校方') {
            this.result_show = false
            // TODO 查询校方消息表
            api.post('studentMessage/findSchoolMessage', { message_id: this.message_id, receiver: this.receiver})
                .then(res => {
                    this.message_detail = res.data
                })
        } else {
            this.result_show = false
        }
    },
    methods: {
        goBack() {
            this.$router.push('/student/message')
        },
        theUpload() {
            api.post('result/addResult', {
                message_id: this.message_id,
                account: this.$store.state.user.account,
                message: this.message
            })
                .then(res => {
                    this.message_detail = res.data
                })
        },
        // ========================
        submitUpload() {
            this.$refs.upload.submit()
        },
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        uploadImg(fileObj) {

            let formData = new FormData()
            formData.set('file', fileObj.file)
            formData.set('message_id', this.message.id)
            formData.set('account', this.$store.state.user.account)
            formData.set('result_url', this.message.result_url)
            formData.set('result_name', this.message.result_name)
            var _this = this
            api.post('/result/addResult', formData, {

                headers: {
                    'Content-type': 'multipart/form-data'
                }
            }).then(function(response) {
                // 根据响应的数据来进行判断文件上传后是否响应成功
                if (response.state == 1) {
                    // 发送成功后
                    _this.$message({
                        type: 'success',
                        message: '上传成功'
                    }),
                    // 跳转路径
                    _this.$router.push({path: '/student/message'})
                }
            }).catch(

            )
        }
    }
}
</script>
